<template>
    <div>
        <el-card shadow="never" class="!border-none">
            <el-alert title="设置用户的消费奖励规则" type="warning" :closable="false" show-icon />
            <el-form
                class="mt-4"
                label-width="120px"
                :model="formData"
                :rules="rules"
                ref="ruleFormRef"
            >
                <el-form-item label="消费奖励" prop="enable">
                    <div>
                        <el-switch
                            v-model="formData.enable"
                            active-value="1"
                            inactive-value="0"
                        ></el-switch>
                        <div class="form-tips">
                            开启或关闭消费奖励功能，关闭后用户下单消费将不会产生奖励
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="奖励类型" prop="reward_method">
                    <div>
                        <el-radio-group v-model="formData.reward_method">
                            <el-radio label="1">积分</el-radio>
                            <!-- <el-radio label="0">优惠券</el-radio> -->
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="奖励事件" prop="event">
                    <el-select v-model="formData.event">
                        <el-option value="1" label="订单完成"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="奖励方式" prop="integral_method">
                    <div>
                        <el-radio-group v-model="formData.integral_method">
                            <el-radio label="1">赠送固定积分</el-radio>
                            <el-radio label="0">按比例赠送</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="奖励对象" prop="integral_value">
                    <div class="flex flex-col">
                        <el-radio>全体用户</el-radio>
                        <div v-if="formData.integral_method == '1'">
                            <el-input class="w-[240px]" v-model.number="formData.integral_value">
                                <template #append>积分</template>
                            </el-input>

                            <div class="form-tips">每笔订单固定赠送多少积分</div>
                        </div>
                        <div v-if="formData.integral_method == '0'">
                            <el-input class="w-[240px]" v-model="formData.integral_value">
                                <template #append>%</template>
                            </el-input>
                            <div class="form-tips">
                                按订单实付金额赠送，比率必须为整数，例：当设置为100%时，100元=100积分
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <FooterBtns>
            <el-button
                type="primary"
                @click="submitForm(ruleFormRef)"
                v-perms="['ls:system:config:consumption_reward:edit']"
                >保存</el-button
            >
        </FooterBtns>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { consumptionRewardEdit, consumptionRewardDetial } from '@/api/finance/finance'
import feedback from '@/utils/feedback'
interface IformData {
    enable: string
    reward_method: string
    event: string
    integral_method: string
    award_object: string
    integral_value: string
}

const ruleFormRef = ref<FormInstance>()

const formData = ref<IformData>({
    enable: '1', //是否开启 1-开启 0-关闭
    reward_method: '1', //奖励类型 1-赠送积分 0-优惠券
    event: '', //奖励事件
    integral_method: '1', //赠送积分方式 1-固定积分 0-按比例
    award_object: '1', //奖励方式 1-全部用户
    integral_value: '' //赠送积分值
})
//表单校验规则
const rules = reactive<FormRules>({
    enable: [{ required: true, message: '请选择是否开启', trigger: 'blur' }],
    reward_method: [{ required: true, message: '请选择奖励类型', trigger: 'blur' }],
    event: [{ required: true, message: '请选择奖励事件', trigger: 'blur' }],
    integral_method: [{ required: true, message: '请选择积分赠送方式', trigger: 'blur' }],
    integral_value: [{ required: true, message: '请填写赠送积分值', trigger: 'blur' }]
})

//获取消费奖励详情
const getDetail = async () => {
    formData.value = await consumptionRewardDetial()
    // formData.value.enable = res.enable
    // formData.value.awardObject = res.award_object
    // formData.value.rewardMethod = res.reward_method
    // formData.value.event = res.event
    // formData.value.integralValue = res.integral_value
}

//保存
const submitForm = async (formEl: FormInstance | undefined) => {
    // const postForm: any = {}
    // postForm.enable = formData.value.enable
    // postForm.awardObject = formData.value.award_object
    // postForm.rewardMethod = formData.value.reward_method
    // postForm.event = formData.value.event
    // postForm.integralValue = formData.value.integral_value
    // postForm.integralMethod = formData.value.integral_method
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            await consumptionRewardEdit(formData.value)
            await getDetail()
            await feedback.msgSuccess('修改成功！')
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(() => {
    getDetail()
})
</script>

<style lang="scss" scoped>
.el-alert--warning.is-light {
    background-color: #edefff;
    color: #4a5dff;
}
</style>
